<template>

  <div class="body">
    <div class="header"></div>
    <div class="tablebar">
      <div class="logo"></div>
      <div class="title">
        <div class="school">
          <span id="chinese">皖 西 学 院</span>
          <span id="english">West Anhui University</span>
        </div>
        <div class="lab">
          <span id="chinese">大学生软件创客实验室</span>
          <span id="english">Campus Software Innovators Lab</span>
        </div>
      </div>
      <div class="barList">
        <div class="index" id="bar" @click="index">首页</div>
        <div class="about" id="bar" @click="about">关于创客</div>
        <div class="RDcenter" id="bar" @click="RDcenter">研发中心</div>
        <div class="RDteam" id="bar" @click="RDteam">研发团队</div>
        <div class="Aicenter" id="bar" @click="Aicenter">AI能力中台</div>
        <div class="joinUs" id="bar" @click="joinUs">加入创客</div>
      </div>
    </div>
      <div class="main" >
        <el-row >
          <el-col :span="12" :offset="6">
            <div class="Ttitle  backColor">
              {{member.name}}同学的成长记录
            </div>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="6">
            <div class="grid-content"/>
          </el-col>
          <!--        左半部分-->
          <el-col :span="6" class="backColor">
            <div class="grid-content ">
              <!--            头像-->
              <div class="demo-fit avatar-container">
                <div class="block" :key="fit">
                  <el-avatar shape="square" :size="200" :fit="fit" :src="member.pictureUrl"></el-avatar>
                </div>
              </div>
            </div>
          </el-col>
          <!--        右半部分-->
          <el-col :span="6">
            <div class="grid-content backColor">
              <!--            详细信息-->
              <div class="memberDetail">
                <div>姓名: {{ member.name }}</div>
                <div>专业: {{ member.major }}</div>
                <div>加入时间: {{ member.joinTime }}</div>
                <div>擅长: {{ member.expertise }}</div>
                <div>成绩效: {{ member.achievementCount }}</div>
                <div>就职单位: {{ member.employmentCompany }}</div>
                <div>联系方式: {{ member.phone }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content backColor1"/>
          </el-col>
        </el-row>
        <!--       时间线-->
        <el-row >
          <el-col :span="12" :offset="6">
            <div class="backColor" >
              <div class="block timeline">
                <!-- 时间线 -->
                <el-timeline :reverse="reverse">
                  <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    placement="top"
                    :timestamp="activity.timestamp">
                    {{ activity.content }}

                    <div style="margin-left: 55%">
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="activity.pictureUrl">
                      </el-image>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </el-col>
        </el-row>

      </div>
    </div>

</template>
<script>

  export default {
  data() {
  return {
  // 头像
  fit: 'fill',
  // 详细信息
  member: {
  memberId: "uuid-12345",
  name: "张三",
  pictureUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  major: "22级计算机",
  joinTime: "2023.10",
  expertise: "人工智能、大数据",
  employmentCompany: "某科技公司",
  phone: "18812345678",
  isOnDuty: 1,
  achievementCount: 5,
  productList: [
{
  productName: "智能家居控制系统",
  productTime: "2024.05",
  pictureUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
},
{
  productName: "移动办公助手",
  productTime: "2024.06",
  pictureUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
}
  ],
  gameList: [
{
  gameTime: "2024.11",
  gameName: "xxx竞赛",
  gameResult: "一等奖",
  pictureUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
},
{
  gameTime: "2023.09",
  gameName: "xxxx",
  gameResult: "二等奖",
  pictureUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
}
  ]
},
  // 是否倒叙显示
  reverse: false,
}
},
  computed: {
  activities() {
  // 合并 productList 和 gameList，并为每项加上时间戳和内容
  const productActivities = this.member.productList.map(item => ({
  timestamp: item.productTime,
  pictureUrl:item.pictureUrl,
  content: `参加了${item.productName}项目的开发`
}));

  const gameActivities = this.member.gameList.map(item => ({
  timestamp: item.gameTime,
  content: `在 ${item.gameName} 比赛中获得 ${item.gameResult}`
}));

  // 合并两个数组并按时间排序
  const activities = [...productActivities, ...gameActivities];
  return activities.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
}
},
  methods: {}
}
</script>

<style lang="scss" scoped>
.body {
  display: flex;
  flex-direction: column; /* 使子元素垂直排列 */
  // background-color: rgb(255, 255, 255);
  background-image: url(../../assets/images/bac.jpg);
  width: 100%;
  height: auto;
  background-size: cover; /* 图片正好填充 */
  background-repeat: no-repeat; /* 防止背景图重复 */
  background-position: center; /* 背景图居中 */
  background-attachment: fixed; /* 背景图固定，不随页面滚动 */
}
.header {
  background-color: #94070a;
  width: 100%;
  height: 28px;

}
.tablebar {
  display: flex;
  height: 95px;
  width: 95%;
  margin: 0 auto;
  align-items: center; /* 垂直居中 */
}
.main {
  width: 95%;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 auto; /* 使 .main 水平居中 */
  position: relative; /* 添加相对定位以使图标绝对定位相对于 .main */
}
.logo {
  background-image: url(../../assets/images/cksys.png);
  width: 8%;
  height: 96%;
  background-size: cover; /* 图片正好填充 */
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中 */
}
.title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20%;
  height: 85%;
  // font-size: 10%;
  // background-color: #ffffff;
  position: relative;
  font-weight: 600;
}
.school {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column; /* 使文本元素上下排列 */
  align-items: center; /* 垂直居中对齐 */
  font-size: clamp(5px, 6vw, 18px); // 使用 clamp 函数调整字体大小
}
#chinese{
  margin-right: 2%;
}
/* lab元素右下对齐 */
.lab {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column; /* 使文本元素上下排列 */
  align-items: center; /* 垂直居中对齐 */
  font-size: clamp(5px, 6vw, 17px); // 使用 clamp 函数调整字体大小
}
.barList {
  display: flex;
  justify-content: space-between; /* 子元素均匀分布 */
  width: 60%;
  height: 100%;
  margin-left: auto;
}
#bar {
  height: 100%;
  width: 15%;
  text-align: center; /* 文字水平居中 */
  display: flex;
  align-items: center; /* 文字垂直居中 */
  justify-content: center; /* 文字水平居中 */
  padding-top: 0; /* 移除原来的 padding-top */
  font-weight: 600;
  font-size: 2vh;
}
#bar:hover {
  background-color: rgba(255, 255, 255, 0.5); /* 白色透明背景 */
}
.el-icon-full-screen {
  position: absolute;
  z-index: 3;
  top: 3%;
  right: 3%;
}
.el-icon-full-screen:hover {
  color: #ffffff;
}


/*成长记录*/
.grid-content {
  /*border-radius: 4px;*/
  min-height: 36px;
  height: 220px;
}
/*背景白色*/
.backColor {
  /*background-color: white;*/
}

/*页面标题*/
.Ttitle {
  font-size: 30px;
  height: 100px;
  width: 100%;
  text-align: center; /* 文字水平居中 */
  display: flex;
  align-items: center; /* 文字垂直居中 */
  justify-content: center; /* 文字水平居中 */
}

/*头像*/
.avatar-container {
  margin-left: 15%;
  padding-bottom: 3%;
}

/*详细详细*/
.memberDetail {
  font-size: 20px;
  margin-left: 20%;
  padding-bottom: 7.4%;
}

/*时间线*/
.timeline {
  margin-left: 5%;
  padding-top: 10%;
}
</style>
